<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
      <Search :num="buyCarNum"></Search>
      <br>
      <el-row>
        <el-col :span="2" >&nbsp;</el-col>
        <el-col :span="10" >

            <img :src="require('../../assets/images/'+product.imgSrc)" width="470" height="450">

        </el-col>
        <el-col :span="10">
          <el-form ref="form"  label-width="80px">
            <el-form-item label="华清自营">
              <span>{{product.title}}</span>
            </el-form-item>
            <el-form-item label="颜色">
              <el-select v-model="product.color"  placeholder="请选择颜色">
                <el-option label="黄色" value="黄色"></el-option>
                <el-option label="白色" value="白色"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="品牌">
              <span>{{product.brand}}</span>
            </el-form-item>
            <el-form-item label="类型">
            <span>{{product.productType}}</span>
          </el-form-item>
            <el-form-item label="价格">
              <span>{{product.price}}</span>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number v-model="product.num" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addBuyCar">加入购物车</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" >&nbsp;</el-col>
      </el-row>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";

  import {getCookie} from "../../assets/js/cookieUtil";

  export default {
    name: "ProductDetail",
    components:{
      Header,
      Search,
      Footer
    },
    data(){
      return{
        addForm:{//添加购物车请求参数
           goodsId:"",
           goodsName:"",
           num:0,
          price:0,
          src:"",
          sallerId:0
        },
        product:{
          title:"",
          color:"黄色",
          brand:"",
          productType:"",
          price:0,
          num:1,
          imgSrc:""
        },
        buyCarNum:0 //购物车数量
      }
    },
    methods:{
      addBuyCar(){//添加购物车
         const  self = this;
        this.addForm.num = this.product.num;
         this.$http.get("/car/addCar",{params:this.addForm})
         .then(function (rs) {
             self.$alert(rs.data.msg);
             if(rs.data.code==200){
                self.buyCarNum = rs.data.data;

             }


         })
      }
    },
    mounted() {
      const p = sessionStorage.getItem("productDetail");
      const x = JSON.parse(p);
      console.log(x);
      this.product.title = x.title;
      this.product.brand = x.brand.brandName;
      if(x.proType==1){
        this.product.productType ="男装";
      }
      if(x.proType==2){
        this.product.productType ="女装";
      }
      if(x.proType==3){
        this.product.productType ="鞋包";
      }
      this.product.price = x.price;
      this.product.imgSrc = x.src;
      //添加购物车参数
      this.addForm.goodsId = x.goodsId;
      this.addForm.goodsName = x.title;
      this.addForm.num = this.product.num;
      this.addForm.price = x.price;
      this.addForm.src = x.src;
      this.addForm.sallerId = x.sellerId;


    }

  }
</script>

<style scoped>

</style>
